<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <template #header>
        <div>
          <el-button type="primary" icon="el-icon-plus" @click="shwoDiglog"
            >添加</el-button
          >
        </div>
      </template>

      <!-- card body -->
      <el-table
        :data="trademarkList"
        style="width: 100%"
        v-loading="tableLoading"
      >
        <el-table-column
          type="index"
          label="序号"
          width="200"
        ></el-table-column>
        <el-table-column prop="tmName" label="品牌名称" width="230">
        </el-table-column>
        <el-table-column label="品牌Logo" width="320">
          <template v-slot="scope">
            <div>
              <el-image
                :src="scope.row.logoUrl"
                style="width: 100px; "
              ></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作 ">
          <template v-slot="{ row }">
            <el-button
              type="warning"
              size="small"
              icon="el-icon-edit"
              @click="updataTm(row)"
              >修改</el-button
            >
            <el-button
              type="danger"
              size="small"
              icon="el-icon-delete"
              @click="deleteTm(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[3, 5, 7, 9]"
        :page-size="limit"
        layout=" sizes, prev, pager, next, jumper,total"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!--添加一个品牌的弹窗  -->
    <el-dialog
      :title="tmInfo.id ? '修改品牌' : '添加品牌'"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-form label-width="80px" :inline="false" size="normal">
        <!-- 品牌名称 -->
        <el-form-item label="品牌名称">
          <el-input v-model="tmInfo.tmName"></el-input>
        </el-form-item>
        <!-- 品牌图片 -->
        <el-form-item label="品牌Logo">
          <el-upload
            class="avatar-uploader"
            :action="`${baseURL}/admin/product/upload`"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="tmInfo.logoUrl" :src="tmInfo.logoUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrUpdataTrademarkItem"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  reqTrademarkList,
  reqAddTrademarkItem,
  reqUpdateTrademark,
  reqDeleteTm
} from "@/api/trakemark";
export default {
  name: "Trademark",
  data() {
    return {
      limit: 5, //每页条数
      total: 0, //总数,
      page: 1, //当前页
      trademarkList: [], //数据

      tableLoading: false, //图片loading状态
      dialogVisible: false, // 展示添加品牌框状态
      baseURL: "http://gmall-h5-api.atguigu.cn", //公共路径

      tmInfo: {
        // id: 1, // id
        tmName: "", //收集新增加的品牌名称
        logoUrl: "" //图片
      }
    };
  },

  methods: {
    handleSizeChange(val) {
      this.limit = val;
      // 重新发送请求
      this.getTrademarkList();
      // 打开lodaing
      this.tableLoading = true;
    },
    handleCurrentChange(val) {
      this.page = val;
      // 重新发送请求
      this.getTrademarkList();
    },
    // 请求数据
    async getTrademarkList() {
      // 打开lodaing
      this.tableLoading = true;
      // console.log(this.page);
      const result = await reqTrademarkList(this.page, this.limit);
      // console.log(result);
      this.trademarkList = result.data.records;
      // 页码总数
      this.total = result.data.total;
      // 关闭loading
      this.tableLoading = false;
    },

    // 确定按钮添加一个品牌
    async addOrUpdataTrademarkItem() {
      // console.log(2222);
      // console.log(this.tmName, 1111);
      if (!this.tmInfo.id) {
        console.log(this.tmInfo,'111')
        //添加一个新品牌
        // 发送添加请求
        await reqAddTrademarkItem(this.tmInfo);
        this.$message({
          message: "添加成功",
          type: "success"
        });
      } else {
        // 修改请求
        await reqUpdateTrademark(this.tmInfo);
        this.$message({
          message: "恭喜你，修改成功",
          type: "success"
        });
      }
      // 重新发送请求
      this.getTrademarkList();
      //关闭弹窗
      this.dialogVisible = false;
    },

    // 点击添加弹窗按钮 打开弹窗  请求内容
    shwoDiglog() {
      // 打开弹窗
      this.dialogVisible = true;
      // 清空表单
      this.tmInfo = {
        tmName: "",
        logoUrl: ""
      };
    },

    // 修改品牌  1.复用弹窗 2.数据回填  3.发送请求
    async updataTm(row) {
      // console.log(row);
      this.tmInfo = { ...row };
      // 打开弹窗
      this.dialogVisible = true;
    },

    // 删除一个品牌
    async deleteTm(id) {
      // console.log(row);
      await reqDeleteTm(id);
      this.$message({
        message: "恭喜你，删除成功",
        type: "success"
      });
      // 重新发送请求
      this.getTrademarkList();
    },

    // 图片上传的限制
    handleAvatarSuccess(res, file) {
      console.log(res,"res")
      this.tmInfo.logoUrl =res.data
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    }
  },

  mounted() {
    this.getTrademarkList();
  }
};
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
